<template>
  <div class="bottom-tab-container">
    <van-tabbar
      v-model="active"
      :active-color="activeColor"
      @change="onChange"
      :route="true"
      :fixed="true"
    >
      <van-tabbar-item name="/home" replace to="/home">
        <span>首页</span>
        <template #icon>
          <SvgIcon :iconClass="active === '/home' ? 'tabs-home-active' : 'tabs-home'" />
        </template>
      </van-tabbar-item>

      <van-tabbar-item name="/drive" replace to="/drive">
        <span>基础设置</span>
        <template #icon>
          <SvgIcon :iconClass="active === '/drive' ? 'tabs-drive-active' : 'tabs-drive'" />
        </template>
      </van-tabbar-item>

      <van-tabbar-item name="/setting" replace to="/setting">
        <span>高级设置</span>
        <template #icon>
          <SvgIcon :iconClass="active === '/setting' ? 'tabs-setting-active' : 'tabs-setting'" />
        </template>
      </van-tabbar-item>
    </van-tabbar>
  </div>
</template>

<script lang="ts" setup>
import { ref, watch } from 'vue'
import { useRoute } from 'vue-router'
import variables from '@/styles/variables.module.scss'

// 当前路由实例
const route = useRoute()

// tab页面激活的索引
const active = ref(route.path)

// tab页面激活的颜色
const activeColor = variables.primaryColor

// 监听路由变化
watch(
  () => route.path,
  (newPath) => {
    active.value = newPath
  },
)

/**
 * tab页面切换事件
 */
const onChange = (name: string) => {
  active.value = name
  console.log('tab页面切换事件', name)
}
</script>

<style lang="scss" scoped>
.bottom-tab-container {
  width: 100%;
  height: var(--van-tabbar-height);
  position: fixed;
  bottom: 0;
  left: 0;
  z-index: 9999;
}
</style>
